<template>
  <div class="chatBotEntryContainer">
    <NButton @click="handleShow">弹出按钮</NButton>
    <div class="chatBotContainer" :class="{ 'show': show }">
      <ChatBot :show="show"></ChatBot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { NButton } from 'naive-ui'
import ChatBot from './chat-bot.vue'

const show = ref(false)

const handleShow = () => {
  show.value = !show.value
}
</script>

<style scoped>
.chatBotEntryContainer {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.chatBotContainer {
  position: absolute;
  width: 44vh;
  height: 80vh;
  bottom: 50px;
  right: 0;
  box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  border: 2px solid white;
  background-image: url('../../assets/bg.png');
  background-size: cover;

  opacity: 0;
  transform: scale(0.5) rotate(5deg);
  /* 初始时缩小且旋转一点，增加果冻效果 */
  transition: all 0.5s ease;
  /* 延长动效时间，更明显 */
}

.chatBotContainer.show {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  /* 显示时恢复正常大小和角度 */
}
</style>
